<template>
<div>
    <!--头部操作行开始-->
    <div class="form-top">
        <div class="form-top-left"></div>
        <!--右侧全局操作按钮-->
        <div class="form-top-right">
            <el-button-group>
                <!--友情链接新建-->
                <Friendship-add :getLinkList="getLinkList" showBetCode="wzgl-sy-yqlj-xj"></Friendship-add>
            </el-button-group>
        </div>
    </div>
    <!--头部操作行结束-->
    <!--中间表格区域开始-->
    <el-table ref="multipleTable" :data="LinkList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
        <el-table-column type="index" label="序号" width="52" align="center"></el-table-column>
        <el-table-column prop="name" label="链接名称" width="518" align="center"></el-table-column>
        <el-table-column prop="picUrl" label="图片" show-overflow-tooltip width="171" align="center">
            <template slot-scope="scope">
                <span class="jia-pic">
                    <img :src="baseUrl+ scope.row.picUrl" alt />
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="url" label="链接地址" show-overflow-tooltip width="403" align="center"></el-table-column>

        <el-table-column prop="sort" label="排序" show-overflow-tooltip width="174" align="center">
            <template slot-scope="scope">
                <span class="up" @click="up(scope.row.id)">
                    <img src="@/assets/image/up.png" alt />
                </span>
                <span class="down" @click="down(scope.row.id)">
                    <img src="@/assets/image/down.png" alt />
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip width="223" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <Link-bianJi :id="scope.row.id" :getLinkList="getLinkList" showBetCode="wzgl-sy-yqlj-xy"></Link-bianJi>
                    <Single-deletion :clearOne="clearOne" :id="scope.row.id" showBetCode="wzgl-sy-yqlj-del"></Single-deletion>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px"></div>
    <!--中间表格区域结束-->
</div>
</template>

<script>
import FriendshipAdd from "./friendshipAdd.vue";
import SingleDeletion from "@/components/Popup/SingleDeletion.vue";
import LinkBianJi from "@/components/Popup/LinkBianJi.vue";

export default {
    components: {
        FriendshipAdd,
        SingleDeletion,
        LinkBianJi,
    },
    data() {
        return {
            //后台数据开始
            // 参数
            // 友情链接参数
            paramsLink: {
                pageNum: "1",
                pageSize: "10",
            },
            //后台数据保存位置
            //友情链接列表
            LinkList: [],
            //   后台数据结束
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
            options: [{
                    value: "选项1",
                    label: "全部",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],
            value: "",
            multipleSelection: [],
            //分页器
            currentPage4: 4,
            //输入框
            input: "",
            //日期选择器
            value1: "",
            value2: "",
        };
    },
    created() {
        //   友情链接调用
        this.getLinkList();
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    methods: {
        //调用友情链接列表接口
        getLinkList() {
            this.Api.getLinkList(this.paramsLink).then((res) => {
                this.LinkList.length = 0;
                this.LinkList = res.data.records;
                // console.log(this.LinkList,111)
            });
        },
        //单行删除
        clearOne(id) {
            let ID = {
                id: id
            };
            // console.log(ID,12121)
            this.Api.getLinkClear(ID).then((res) => {
                this.getLinkList();
            });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        //箭头
        // 上移
        up(id) {
            //   console.log(id,1212)
            let ID = {
                id: id
            };
            this.Api.getLinkUp(ID).then((res) => {
                // console.log(res,111)
                this.getLinkList();
                // console.log("上");
            });
        },
        // 下移
        down(id) {
            let ID = {
                id: id
            };
            this.Api.getLinkDown(ID).then((res) => {
                // console.log(res,111)
                this.getLinkList();
                // console.log("上");
            });
        },
    },
};
</script>

<style lang="less" scoped>
.form-top {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 21px;

    .form-top-left {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 21px;
    }
}

/deep/.el-input__inner {
    width: 154px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(230, 230, 230, 1);
}

/deep/.el-select {
    margin-right: 10px;
}

/deep/.el-button--primary {
    width: 52px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
}

/deep/.el-button--default {
    width: 52px;
    height: 36px;
    background: rgba(240, 242, 245, 1);
    border-radius: 3px;
    border: 1px solid rgba(215, 219, 224, 1);
    padding: 0;
}

/deep/.el-button--bianji {
    width: 60px;
    height: 28px;
    background: #3d7fff;
    border-radius: 3px;
    padding: 0;
    color: white;
    margin-right: 10px !important;
}

/deep/.el-button--shanchu {
    width: 60px;
    height: 28px;
    background: #fb363f;
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: white;
}

/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    padding: 0;
}

/deep/.el-table__header {
    background-color: #e8e8e8 !important;
}

/deep/.el-table_1_column_1 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/deep/.el-table {
    td {
        padding: 8px 0;
    }

    th {
        padding: 8px 0;
    }
}

/deep/.el-button--chakan {
    width: 60px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #333333;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-button--shenghe {
    width: 60px;
    height: 28px;
    background: #f5a623;
    border-radius: 4px;
    color: white;
    padding: 0;
}

.fenye {
    margin-left: 730px;
}

/**改动 */

/deep/.el-input {
    width: 154px;
    margin-right: 20px;
}

/deep/.el-date-editor {
    position: relative;
}

/deep/.el-input__icon,
.el-icon-date {
    line-height: 35px;
    position: absolute;
    left: 120px;
}

.time-zhi {
    margin-right: 13px;
}

/deep/.el-table_10_column_67,
.is-leaf {
    /deep/.cell {
        padding-left: 35px;
    }
}

.jia-pic {
    display: inline-block;
    width: 104px;
    height: 30px;

    img {
        width: 104px;
        height: 30px;
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 46px;
    }
}

//箭头
.down {
    cursor: pointer;
}

.up {
    cursor: pointer;
    margin-right: 20px;
}

//按钮操作组
.el-button-group {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
